<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.Dialog.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.Dialog.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.Dialog.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;다이얼로그&nbsp;레이어
	@author&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/

/**
	사용자&nbsp;대화창을&nbsp;생성하는&nbsp;컴포넌트
	
	@class&nbsp;jindo.Dialog
	@extends&nbsp;jindo.Component
	@uses&nbsp;jindo.LayerPosition
	
	@keyword&nbsp;dialog,&nbsp;다이얼로그,&nbsp;대화상자
**/
jindo.Dialog&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.Dialog.prototype&nbsp;*/
		
	/**
		Dialog&nbsp;컴포넌트를&nbsp;생성한다.

		@constructor
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션&nbsp;해시테이블
			@param&nbsp;{String}&nbsp;[htOption.sClassPrefix=&quot;dialog-&quot;]&nbsp;Dialog에&nbsp;적용될&nbsp;Class의&nbsp;prefix명.&nbsp;(&nbsp;layer와&nbsp;각&nbsp;버튼에&nbsp;prefix+&quot;명칭&quot;&nbsp;으로&nbsp;클래스가&nbsp;구성된다.&nbsp;)
			@param&nbsp;{Object}&nbsp;[htOption.LayerPosition]&nbsp;다이얼로그의&nbsp;위치&nbsp;정보,&nbsp;jindo.LayerPosition&nbsp;컴포넌트의&nbsp;옵션이&nbsp;그대로&nbsp;적용됨
		@example
			var&nbsp;oDialog&nbsp;=&nbsp;new&nbsp;jindo.Dialog({
				sClassPrefix&nbsp;:&nbsp;&#39;dialog-&#39;,&nbsp;//Default&nbsp;Class&nbsp;Prefix
				LayerPosition&nbsp;:&nbsp;{&nbsp;//LayerPosition에&nbsp;적용될&nbsp;옵션
					sPosition&nbsp;:&nbsp;&quot;inside-center&quot;,
					bAuto&nbsp;:&nbsp;true
				}
			}).attach({
				beforeShow&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//다이얼로그&nbsp;레이어가&nbsp;보여지기&nbsp;전에&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elLayer&nbsp;(HTMLElement)&nbsp;다이얼로그&nbsp;레이어
					//}
					//oCustomEvent.stop();&nbsp;수행시&nbsp;보여지지&nbsp;않음
				},
				show&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//다이얼로그&nbsp;레이어가&nbsp;보여진&nbsp;후&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elLayer&nbsp;(HTMLElement)&nbsp;다이얼로그&nbsp;레이어
					//}
				},
				beforeHide&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//다이얼로그&nbsp;레이어가&nbsp;숨겨지기&nbsp;전에&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elLayer&nbsp;(HTMLElement)&nbsp;다이얼로그&nbsp;레이어
					//}
					//oCustomEvent.stop();&nbsp;수행시&nbsp;숨겨지지&nbsp;않음
				},
				hide&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//다이얼로그&nbsp;레이어가&nbsp;숨겨진&nbsp;후&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elLayer&nbsp;(HTMLElement)&nbsp;다이얼로그&nbsp;레이어
					//}
				}
			});
	**/
	$init&nbsp;:&nbsp;function(htOption)&nbsp;{
		//옵션&nbsp;초기화
		var&nbsp;htDefaultOption&nbsp;=&nbsp;{
			sClassPrefix&nbsp;:&nbsp;&#39;dialog-&#39;,&nbsp;//Default&nbsp;Class&nbsp;Prefix
			LayerPosition&nbsp;:&nbsp;{
				sPosition&nbsp;:&nbsp;&quot;inside-center&quot;,
				bAuto&nbsp;:&nbsp;true
			}
		};
		this.option(htDefaultOption);
		this.option(htOption&nbsp;||&nbsp;{});
		
		this._bIsEventAttached&nbsp;=&nbsp;false;
		this._bIsShown&nbsp;=&nbsp;false;
		
		//컴포넌트에서&nbsp;사용되는&nbsp;HTMLElement들을&nbsp;선언하는&nbsp;메서드
		this._assignHTMLElements();
		this._initLayerPosition();
	},
	
	/**
		HTMLElement들을&nbsp;선언한다.
		
		@method&nbsp;_assignHTMLElements
		@ignore
	**/
	_assignHTMLElements&nbsp;:&nbsp;function()&nbsp;{
		this._elLayer&nbsp;=&nbsp;jindo.$(&#39;&lt;div&nbsp;class=&quot;&#39;&nbsp;+&nbsp;this.option(&quot;sClassPrefix&quot;)&nbsp;+&nbsp;&#39;layer&quot;&gt;&lt;/div&gt;&#39;);
		this._welLayer&nbsp;=&nbsp;jindo.$Element(this._elLayer);
		this._wfClick&nbsp;=&nbsp;jindo.$Fn(this._onClick,&nbsp;this);
		
		jindo.$Element.prototype.preventTapHighlight&nbsp;&amp;&amp;&nbsp;this._welLayer.preventTapHighlight(true);
	},
	
	/**
		LayerPosition&nbsp;컴포넌트를&nbsp;초기화한다.
		
		@method&nbsp;_initLayerPosition
		@ignore
	**/
	_initLayerPosition&nbsp;:&nbsp;function()&nbsp;{
		this._oLayerPosition&nbsp;=&nbsp;new&nbsp;jindo.LayerPosition(document.body,&nbsp;this._elLayer,&nbsp;this.option(&quot;LayerPosition&quot;));
	},
	
	/**
		다이얼로그&nbsp;레이어&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getLayer
		@return&nbsp;{HTMLElement}&nbsp;레이어&nbsp;엘리먼트
	**/
	getLayer&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elLayer;
	},
	
	/**
		생성된&nbsp;LayerPosition&nbsp;컴포넌트의&nbsp;인스턴스를&nbsp;가져온다.
		
		@method&nbsp;getLayerPosition
		@return&nbsp;{jindo.LayerPosition}&nbsp;LayerPosition&nbsp;컴포넌트의&nbsp;인스턴스
	**/
	getLayerPosition&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oLayerPosition;
	},
	
	/**
		다이얼로그&nbsp;레이어에&nbsp;대한&nbsp;템플릿을&nbsp;설정한다.
		다이얼로그&nbsp;레이어의&nbsp;내용을&nbsp;동적으로&nbsp;설정하기&nbsp;위해&nbsp;템플릿&nbsp;형태로&nbsp;설정한다.
		
		@method&nbsp;setLayerTemplate
		@param&nbsp;{String}&nbsp;sTemplate&nbsp;템플릿&nbsp;문자열
		@remark&nbsp;Jindo의&nbsp;jindo.$Template&nbsp;참고
		@example
			oDialog.setLayerTemplate(&#39;&lt;div&gt;&lt;a&nbsp;href=&quot;#&quot;&nbsp;class=&quot;dialog-close&quot;&gt;&lt;img&nbsp;width=&quot;15&quot;&nbsp;height=&quot;14&quot;&nbsp;alt=&quot;레이어닫기&quot;&nbsp;src=&quot;http://static.naver.com/common/btn/btn_close2.gif&quot;/&gt;&lt;/a&gt;&lt;/div&gt;&lt;div&nbsp;style=&quot;position:absolute;top:30px;left:10px;&quot;&gt;{=text}&lt;/div&gt;&lt;div&nbsp;style=&quot;position:absolute;bottom:10px;right:10px;&quot;&gt;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;dialog-confirm&quot;&gt;확인&lt;/button&gt;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;dialog-cancel&quot;&gt;취소&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&#39;);
	**/
	setLayerTemplate&nbsp;:&nbsp;function(sTemplate)&nbsp;{
		this._sTemplate&nbsp;=&nbsp;sTemplate;
		this._template&nbsp;=&nbsp;jindo.$Template(this._sTemplate);
	},
	
	/**
		설정된&nbsp;다이얼로그&nbsp;레이어의&nbsp;템플릿을&nbsp;가져온다.
		
		@method&nbsp;getLayerTemplate
		@return&nbsp;{String}&nbsp;설정된&nbsp;템플릿
	**/
	getLayerTemplate&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._sTemplate;
	},
	
	/**
		다이얼로그&nbsp;레이어를&nbsp;보여준다.
		
		@method&nbsp;show
		@remark&nbsp;다이얼로그&nbsp;레이어는&nbsp;설정된&nbsp;레이어의&nbsp;템플릿으로부터&nbsp;만들어져&nbsp;document.body에&nbsp;append된다.
		@param&nbsp;{Object}&nbsp;htTemplateProcess&nbsp;템플릿에&nbsp;대체하기&nbsp;위한&nbsp;데이터를&nbsp;가지는&nbsp;Hash&nbsp;Table
		@param&nbsp;{Object}&nbsp;htEventHandler&nbsp;다이얼로그&nbsp;내부에서&nbsp;발생하는&nbsp;이벤트를&nbsp;처리하는&nbsp;핸들러들
		@example
			//다이얼로그&nbsp;레이어에&nbsp;닫기,&nbsp;취소,&nbsp;확인&nbsp;버튼이&nbsp;모두&nbsp;존재하는경우&nbsp;각각의&nbsp;버튼에&nbsp;대한&nbsp;핸들러를&nbsp;함께&nbsp;등록한다.&nbsp;
			var&nbsp;oDialog&nbsp;=&nbsp;new&nbsp;jindo.Dialog();
			
			oDialog.setLayerTemplate(&#39;&lt;div&gt;&lt;a&nbsp;href=&quot;#&quot;&nbsp;class=&quot;dialog-close&quot;&gt;&lt;img&nbsp;width=&quot;15&quot;&nbsp;height=&quot;14&quot;&nbsp;alt=&quot;레이어닫기&quot;&nbsp;src=&quot;http://static.naver.com/common/btn/btn_close2.gif&quot;/&gt;&lt;/a&gt;&lt;/div&gt;&lt;div&nbsp;style=&quot;position:absolute;top:30px;left:10px;&quot;&gt;{=text}&lt;/div&gt;&lt;div&nbsp;style=&quot;position:absolute;bottom:10px;right:10px;&quot;&gt;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;dialog-confirm&quot;&gt;확인&lt;/button&gt;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;dialog-cancel&quot;&gt;취소&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&#39;);
			
			oDialog.show({&nbsp;text&nbsp;:&nbsp;&quot;&lt;strong&gt;확인하시겠습니까?&lt;/strong&gt;&quot;&nbsp;},&nbsp;{
				close&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					jindo.$Element(&quot;status&quot;).text(&quot;oDialog의&nbsp;레이어에서&nbsp;닫기&nbsp;버튼이&nbsp;클릭되었습니다.&quot;);
					//oCustomEvent.stop()&nbsp;수행시&nbsp;레이어가&nbsp;닫히지&nbsp;않는다.
				},
				cancel&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					jindo.$Element(&quot;status&quot;).text(&quot;oDialog의&nbsp;레이어에서&nbsp;취소&nbsp;버튼이&nbsp;클릭되었습니다.&quot;);
					//oCustomEvent.stop()&nbsp;수행시&nbsp;레이어가&nbsp;닫히지&nbsp;않는다.
				},
				confirm&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					jindo.$Element(&quot;status&quot;).text(&quot;oDialog의&nbsp;레이어에서&nbsp;확인&nbsp;버튼이&nbsp;클릭되었습니다.&quot;);
					//oCustomEvent.stop()&nbsp;수행시&nbsp;레이어가&nbsp;닫히지&nbsp;않는다.
				}
			});	
	**/
	show&nbsp;:&nbsp;function(htTemplateProcess,&nbsp;htEventHandler)&nbsp;{
		if&nbsp;(!this.isShown())&nbsp;{
			this.attach(htEventHandler);
			
			document.body.appendChild(this._elLayer);
			this._welLayer.html(this._template.process(htTemplateProcess));
			
			var&nbsp;htCustomEvent&nbsp;=&nbsp;{
				&quot;elLayer&quot;:&nbsp;this._elLayer
			};
			
			/**
				다이얼로그가&nbsp;화면에&nbsp;보여지기&nbsp;전에&nbsp;발생
				
				@event&nbsp;beforeShow
				@param&nbsp;{String}&nbsp;sType&nbsp;발생한&nbsp;이벤트명
				@param&nbsp;{HTMLElement}&nbsp;elLayer&nbsp;다이얼로그&nbsp;Element
				@param&nbsp;{Function}&nbsp;stop&nbsp;레이어가&nbsp;보여지지않도록&nbsp;수행종료
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oDialog.attach(&quot;beforeShow&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
			**/
			if&nbsp;(this.fireEvent(&quot;beforeShow&quot;,&nbsp;htCustomEvent))&nbsp;{
				this._welLayer.show();
				this._attachEvents();
				this.getLayerPosition().setPosition();
				this._bIsShown&nbsp;=&nbsp;true;
				/**
					다이얼로그&nbsp;레이어가&nbsp;화면에&nbsp;보여지면&nbsp;발생
					
					@event&nbsp;show
					@param&nbsp;{String}&nbsp;sType&nbsp;발생한&nbsp;이벤트명
					@param&nbsp;{HTMLElement}&nbsp;elLayer&nbsp;다이얼로그&nbsp;Element
					@example
						//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
						oDialog.attach(&quot;show&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
				**/
				this.fireEvent(&quot;show&quot;,&nbsp;htCustomEvent);
			}
		}
	},
	
	/**
		다이얼로그&nbsp;레이어를&nbsp;숨긴다.
		
		@method&nbsp;hide
		@remark&nbsp;다이얼로그&nbsp;레이어가&nbsp;숨겨지는&nbsp;동시에&nbsp;모든&nbsp;이벤트가&nbsp;제거되고&nbsp;document.body에서&nbsp;제거된다.
	**/
	hide&nbsp;:&nbsp;function()&nbsp;{
		if&nbsp;(this.isShown())&nbsp;{
			var&nbsp;htCustomEvent&nbsp;=&nbsp;{&quot;elLayer&quot;&nbsp;:&nbsp;this._elLayer&nbsp;};&nbsp;
			
			/**
				다이얼로그가&nbsp;숨겨지기&nbsp;전&nbsp;발생
				
				@event&nbsp;beforeHide
				@param&nbsp;{String}&nbsp;sType&nbsp;발생한&nbsp;이벤트명
				@param&nbsp;{HTMLElement}&nbsp;elLayer&nbsp;다이얼로그&nbsp;Element
				@param&nbsp;{Function}&nbsp;stop&nbsp;레이어를&nbsp;숨기지&nbsp;않음
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oDialog.attach(&quot;beforeHide&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
			**/
			if&nbsp;(this.fireEvent(&quot;beforeHide&quot;,&nbsp;htCustomEvent))&nbsp;{
				this.detachAll(&quot;close&quot;).detachAll(&quot;confirm&quot;).detachAll(&quot;cancel&quot;);
				this._detachEvents();
				this._welLayer.hide();
				this._welLayer.leave();
				this._bIsShown&nbsp;=&nbsp;false;
				/**
					다이얼로그가&nbsp;닫힌후에&nbsp;발생
					
					@event&nbsp;hide
					@param&nbsp;{String}&nbsp;sType&nbsp;발생한&nbsp;이벤트명
					@param&nbsp;{HTMLElement}&nbsp;elLayer&nbsp;다이얼로그&nbsp;Element
					@example
						//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
						oDialog.attach(&quot;hide&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
				**/
				this.fireEvent(&quot;hide&quot;,&nbsp;htCustomEvent);&nbsp;
			}&nbsp;
		}
	},
	
	/**
		다이얼로그&nbsp;레이어가&nbsp;보여지고&nbsp;있는지&nbsp;가져온다.
		
		@method&nbsp;isShown
		@return&nbsp;{Boolean}&nbsp;다이얼로그&nbsp;레이어의&nbsp;노출여부
	**/
	isShown&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._bIsShown;
	},
	
	/**
		이벤트&nbsp;등록&nbsp;여부를&nbsp;가져온다.
		@return&nbsp;{Boolean}
		@ignore
	**/
	_isEventAttached&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._bIsEventAttached;
	},

	/**
		이벤트를&nbsp;등록한다.
		@return&nbsp;{this}
		@ignore
	**/
	_attachEvents&nbsp;:&nbsp;function()&nbsp;{
		if&nbsp;(!this._isEventAttached())&nbsp;{
			//활성화&nbsp;로직&nbsp;ex)event&nbsp;binding
			this._wfClick.attach(this._elLayer,&nbsp;&quot;click&quot;);
			this._bIsEventAttached&nbsp;=&nbsp;true;
		}
		return&nbsp;this;
	},
	
	/**
		이벤트를&nbsp;해제한다.
		@return&nbsp;{this}
		@ignore
	**/
	_detachEvents&nbsp;:&nbsp;function()&nbsp;{
		if&nbsp;(this._isEventAttached())&nbsp;{
			//비활성화&nbsp;로직&nbsp;ex)event&nbsp;unbinding
			this._wfClick.detach(this._elLayer,&nbsp;&quot;click&quot;);
			this._bIsEventAttached&nbsp;=&nbsp;false;
		}
		return&nbsp;this;
	},
	
	/**
		다이얼로그&nbsp;레이어&nbsp;내부에서&nbsp;닫기,&nbsp;확인,&nbsp;취소&nbsp;버튼을&nbsp;처리하기&nbsp;위한&nbsp;핸들러
		@param&nbsp;{jindo.$Event}&nbsp;we
		@ignore
	**/
	_onClick&nbsp;:&nbsp;function(we)&nbsp;{
		var&nbsp;sClassPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;);
		var&nbsp;elClosestClose,&nbsp;elClosestConfirm,&nbsp;elClosestCancel;
		if&nbsp;((elClosestClose&nbsp;=&nbsp;this._getClosest((&quot;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;close&quot;),&nbsp;we.element)))&nbsp;{
			if(this.fireEvent(&quot;close&quot;))&nbsp;{
				this.hide();
			}&nbsp;
		}&nbsp;else&nbsp;if&nbsp;((elClosestConfirm&nbsp;=&nbsp;this._getClosest((&quot;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;confirm&quot;),&nbsp;we.element)))&nbsp;{
			if(this.fireEvent(&quot;confirm&quot;))&nbsp;{
				this.hide();
			}
		}&nbsp;else&nbsp;if&nbsp;((elClosestCancel&nbsp;=&nbsp;this._getClosest((&quot;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;cancel&quot;),&nbsp;we.element)))&nbsp;{
			if&nbsp;(this.fireEvent(&quot;cancel&quot;))&nbsp;{
				this.hide();
			}
		}
	},
	
	/**
		자신을&nbsp;포함하여&nbsp;부모노드중에&nbsp;셀렉터에&nbsp;해당하는&nbsp;가장&nbsp;가까운&nbsp;엘리먼트를&nbsp;구함
		@param&nbsp;{String}&nbsp;sSelector&nbsp;CSS셀렉터
		@param&nbsp;{HTMLElement}&nbsp;elBaseElement&nbsp;기준이&nbsp;되는&nbsp;엘리먼트
		@return&nbsp;{HTMLElement}&nbsp;구해진&nbsp;HTMLElement
		@ignore
	**/
	_getClosest&nbsp;:&nbsp;function(sSelector,&nbsp;elBaseElement)&nbsp;{
		if&nbsp;(jindo.$$.test(elBaseElement,&nbsp;sSelector))&nbsp;{
			return&nbsp;elBaseElement;
		}
		return&nbsp;jindo.$$.getSingle(&quot;!&nbsp;&quot;&nbsp;+&nbsp;sSelector,&nbsp;elBaseElement);
	}
}).extend(jindo.Component);	</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>